<template>
    <div>
        <el-input style="width: 250px" size="small" placeholder="输入编码" clearable v-model="encoded.code"/>
        <el-button size="small" type="primary" style="margin-left: 5px" @click="getCourses">查询课程</el-button>
        <el-button size="small" type="success" style="margin-left: 5px" @click="helpDialogVisible = true">教程</el-button>
        <el-table
                ref="multipleTable"
                :data="courses"
                tooltip-effect="dark"
                style="width: 100%;margin-top: 15px"
                height="600px"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="beginTime"
                    label="开课学期"
                    :filters="filter"
                    :filter-method="filterHandler"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="courseNo"
                    label="课程代码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="课程名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="sorce"
                    label="成绩"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="xuefen"
                    label="学分"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="studyTime"
                    label="总学时"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="examProp"
                    label="考试性质"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="point"
                    label="绩点"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="examWay"
                    label="考核方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="courseProp"
                    label="课程性质"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="courseAttr"
                    label="课程属性"
                    width="120">
            </el-table-column>
        </el-table>
        <div style="margin-top: 8px;display: flex">
            <el-button @click="calculate()">计算绩点</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
            <el-input v-model="avgPoint" disabled style="width: 120px;margin-left: 10px"></el-input>
            <el-button @click="dialogVisible=true" style="margin-left: 10px">添加</el-button>
        </div>

        <el-dialog
                title="添加课程"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-form label-position="left" label-width="80px" :model="course">
                <el-form-item label="开课学期">
                    <el-input v-model="course.beginTime"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="course.courseName"></el-input>
                </el-form-item>
                <el-form-item label="学分">
                    <el-input v-model="course.xuefen"></el-input>
                </el-form-item>
                <el-form-item label="绩点">
                    <el-input v-model="course.point"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCourse">确 定</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="helpDialogVisible"
                width="80%"
        >
            <el-carousel indicator-position="outside" height="400px">
                <el-carousel-item v-for="(item,index) in pictures" :key="index">
                    <img :src="item" class="bannerImg"/>
                </el-carousel-item>
            </el-carousel>
            <span slot="footer" class="dialog-footer">
    <el-button @click="helpDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="helpDialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Exam",
        data() {
            return {
                encoded: {
                    code: ""
                },
                pictures:[
                    "calpoint1.png",
                    "calpoint2.png",
                ],
                avgPoint: 0.0,
                multipleSelection: [],
                courses: [],
                dialogVisible:false,
                helpDialogVisible:false,
                course: {
                    id: 1,
                    beginTime: "2018-2019-1",
                    courseNo: "N0003961",
                    courseName: "思想道德修养与法律基础",
                    sorce: 76,
                    xuefen: 3,
                    studyTime: 48,
                    examProp: "正考",
                    point: 2.6,
                    examWay: "考试",
                    courseProp: "必修",
                    courseAttr: "学科基础必修课"
                },
                filter:[]
            }
        },
        mounted() {
            this.getCookie();
        },
        methods: {
            getCookie(){
                let strs = document.cookie.split("; ")
                for (let s of strs){
                    if(s.startsWith("encode=")){
                        console.log(s)
                        this.encoded.code = s.substring(7)
                    }
                }
            },
            getCourses() {
                let url = "/resource/exam/";
                // this.encoded.code = "MTgxMjUwMzEwMjA=%%%aGFwcHl5eWw1MjA=";
                this.postRequest(url, this.encoded).then(resp => {
                    // console.log(this.encoded);
                    if (resp) {
                        this.courses = resp.obj;
                        // console.log(this.courses);
                        let set = new Set()
                        for(let c of this.courses) {
                            set.add(c.beginTime)
                        }
                        this.filter = []
                        for(let s of set){
                            let temp = {
                                text:s,
                                value:s
                            }
                            this.filter.push(temp)
                        }
                        document.cookie = "encode="+this.encoded.code+";expires=Mon, 11 Nov 2030 07:34:46 GMT;"
                    }
                })
            },
            calculate() {
                // console.log(this.multipleSelection)
                let mul = 0.0;
                let sum = 0.0;
                this.multipleSelection.forEach(c => {
                    mul += c.point * c.xuefen;
                    sum += c.xuefen;
                });
                this.avgPoint = mul / sum;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            addCourse() {
                this.courses.push(this.course);
                this.dialogVisible = false;
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>